<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用$.get()方法</title>
    <link rel="stylesheet" href="./news1.css">
</head>
<body>
    <div id="container">
        <nav>
            <ul>
                <li>电视类</li>
                <li>电影类</li>
                <li>明星类</li>
                <li>音乐类</li>
                <li>体育类</li>
                <li>财经类</li>
                <li>军事类</li>
                <li>军情类</li>
            </ul>
        </nav>
        <article>
            
        </article>
    </div>
</body> 
<script src="./jquery.js"></script>
<script>
    $(document).ready(function(){
        //设置中的分类
        function setNav(index=0){
            $("#container nav ul li").removeClass();//删除菜单栏所有li标签的类名
            $(`#container nav ul li:nth-child(${index+1})`).addClass("active");//为索引对应的元素添加active选中类
            //当设置完分类后 获取分类对应的新闻
            let newsCate = [
                "BA10TA81wangning", // 电视
                "BD2A9LEIwangning", // 电影
                "BD2AB5L9wangning", // 明星
                "BD2AC4LMwangning", // 音乐
                "BA8E6OEOwangning", // 体育
                "BA8EE5GMwangning", // 财经
                "BAI67OGGwangning", // 军事
                "DE0CGUSJwangning"  // 军情
            ] 
            // 切换之前先清空原有分类数据
            $("article").html("")
            // newsCate[index] 取出分类对应的字符串
            // 调用getNews将字符串传递到getNews方法形参中
            getNews(newsCate[index]);
        }
        setNav(0)

        // 切换分类事件
        $("#container nav ul li").click(function(){
            let idx = $(this).index();// 获取点击的li元素索引
            setNav(idx)// 调用封装好方法 设置选中效果
        })
       function getNews(c){//c用来接收newCate[index]传递过来的字符串
       // $.get(网址，数据，回调函数)
       // 没事数据给服务器时写一个空对象
       $.get(`https://3g.163.com/touch/reconstruct/article/list/${c}/0-10.html`,{},function (res){
        let end = res.length-10;
        let jsonData = res.substr(9,end); 
        let objectData = JSON.parse(jsonData); 
        // objectData["BA10TA81wangning"]只能取出一个分类的数据 使用形参c代替"BA10TA81wangning"可以灵活获取
        let nwesList = objectData[c];
        for(let i = 0; i < nwesList.length; i++){
            // 取出新闻对象 赋值给变量elemNews
            let elemNews = nwesList[i];
            // 把elemNews内的数据绑定到n变量字符串中
            let n=`<div class="news">
                <div class="left">
                    <img src="${elemNews.imgsrc}" alt="{elemNews.title}">
                </div>
                <div class="right">
                    <h2>${elemNews.title}</h2>
                    <p>${elemNews.digest}</p>
                    <div>
                        <time>${elemNews.ptime}</time>
                        <span>${elemNews.source}</span>
                        <span>评论${elemNews.commentCount}</span>
                    </div>
                </div>
            </div>`
            // 使用jquery把新闻插入到网页上
            $("article").append( $(n) );// $(n) 将n中html字符串转换成jQuery可操的jque对象
        }
        })
    }   
    })
</script>
</html>